import React,{ useState,useEffect ,useReducer} from 'react'
import { NavBar, Button, Toast } from 'antd-mobile'
import "./Detail.less"
import {initState,reducer} from "../Login/user"
import { reqCartadd, reqGetgoodsinfo } from '../../http/api'
import Item from 'antd-mobile/lib/popover/Item'

export default function Detail(props) {
    // 1初始值
        const [goodsinfo,setgoodsinfo]=useState([])
       const [state] = useReducer(reducer,initState)
    //2进页面，取数据
    useEffect(() => {
       let id = props.match.params.id
       reqGetgoodsinfo({id:id}).then(res=>{
           if(res.data.code === 200){
            setgoodsinfo(res.data.list[0])
           }
       })
    }, [])
    const add=()=>{
        let id = props.match.params.id
        reqCartadd({
            uid:state.info.uid,
            goodsid:id,
            num:1,
            type: 1
        }).then(res=>{
            if (res.data.code === 200) {
                Toast.success(res.data.msg, 1)
            }
        })
    }
    return (
        <div>
             <div className="home">
                <NavBar>详情</NavBar>
                {/* 3渲染数据 */}

                <div>
                    <img src={goodsinfo.img} alt="" />
                    <p>商品名称： {goodsinfo.goodsname}</p>
                    <p>商品价格：{goodsinfo.market_price}</p>
                    <Button onClick={() => props.history.push('/index/shop')}>购物车</Button>
                    <Button onClick={() => add()}>加入购物车</Button>
                </div>


            </div>
        </div>
    )
}

